<template>
  <div>
    <div style="float: left" :class="{'head':isBlack}"> 
      <van-nav-bar
        title="发现·好货"
        left-arrow
        @click-left="onClickLeft"
        :fixed="true"
      >
        <template #left>
          <van-icon name="arrow-left" size="26" color="#000" />
        </template>
      </van-nav-bar>
    </div>
    <div class="bg"></div>
    <div>
      <h1 style="font-weight: 400; margin: 20px 0 20px 20px">
        广州民宿 | 高级感民宿推荐
      </h1>
      <div class="geren">
        <div class="touxiang">
          <img
            src="https://qcommons.qunar.com/headshot/headshotsById/286689583.png?b&ssl=true"
            alt=""
          />
        </div>
        <span class="wangming">民宿小哥哥<br />发表于2018年9月24日</span>
      </div>
      <p
        style="
          font-size: 16px;
          line-height: 30px;
          text-indent: 2em;
          margin-top: 40px;
          padding: 0 20px;
        "
      >
        广州民宿 |
        高级感民宿推荐房间坐落于美丽的花城大道，距离夜景最漂亮的花城广场和
        美国领事馆步行10分钟可达。周边美食，商场，银行等生活设施应有尽有，非常便利。
      </p>
    </div>
    <ul class="tupian">
      <li v-for="(v, i) in list" :key="i">
        <img :src="v" alt="" />
      </li>
    </ul>
    <div style="margin-left: 20px;font-weight: 600;color: #00bcd4;"># 特色民宿</div>
    <img src="../../store/LiXiao/END.jpg" alt="" style="margin: 50px 0 35px 0;">
    <div class="guanzhu">
        <img src="../../store/LiXiao/touxiang.jpg" alt="">
        <p style="font-size: 16px;">民宿小哥哥</p><br>
        <p>351粉丝</p><br><br>
        <div class="s-guanzhu">关注</div>
    </div>
    <div style="width: 100%; height: 10px; background-color: #f4f4f4"></div>
    <div class="pinglun">
        <p>评论 1</p>
        <img src="../../store/LiXiao/pinglun1.jpg" alt="">
    </div>
    
  </div>
</template>

<script>
import { getHaohuo } from "@/api/LiXiao/Index";
import { List } from "vant";
export default {
  data() {
    return {
      id: 0,
      list: [
        "https://flight-feed.qunarzz.com/img_ft/prod/2018/9/6b006d4d-167c-4c02-96c7-6a2f55364b0b.jpeg?scale=1.718",
        "https://flight-feed.qunarzz.com/img_ft/prod/2018/9/65d5ce82-3e26-4c75-b6a0-b347efd9fe99.jpeg?scale=1.718",
        "https://flight-feed.qunarzz.com/img_ft/prod/2018/9/a082470e-d306-416e-909d-72e3013dad39.jpeg?scale=1.718",
        "https://flight-feed.qunarzz.com/img_ft/prod/2018/9/6b006d4d-167c-4c02-96c7-6a2f55364b0b.jpeg?scale=1.718",
        "https://flight-feed.qunarzz.com/img_ft/prod/2018/9/65d5ce82-3e26-4c75-b6a0-b347efd9fe99.jpeg?scale=1.718",
        "https://flight-feed.qunarzz.com/img_ft/prod/2018/9/a082470e-d306-416e-909d-72e3013dad39.jpeg?scale=1.718",
        "https://flight-feed.qunarzz.com/img_ft/prod/2018/9/8adebaf4-0b62-499a-9653-2a53985c4d00.jpeg?scale=1.718",
      ],
      isBlack:true
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.funa();
    window.addEventListener("scroll", this.handleScroll, true);
  },

  methods: {
    async funa() {
      let ok = await getHaohuo({ id: this.id });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    handleScroll() {
      var top = Math.floor(document.body.scrollTop ||document.documentElement.scrollTop ||window.pageYOffset);
    //   console.log(top);
      if(top==0){
        this.isBlack=false
      }else{
        this.isBlack=true
      }
    },
  },
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 200px;
  background-image: url(https://flight-feed.qunarzz.com/img_ft/prod/2018/9/a0a82a88-9366-4ab5-8c8f-4d8e647ef124.jpeg_r_350x_2a877739.jpeg?scale=1.718);
  background-repeat: no-repeat;
  background-size: 100%;
}
.touxiang {
  width: 35px;
  height: 35px;
  margin-right: 10px;
}
.touxiang > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.geren {
  display: flex;
  margin-left: 20px;
}
.tupian {
  width: 90%;
  height: auto;
  margin: 0 auto;
  padding-bottom: 100px;
}
.tupian > li {
  width: 100%;
  height: 200px;
  margin: 20px 0;
}
.tupian > li > img {
  width: 100%;
  height: 100%;
}

.head .van-nav-bar{
    background-color: #fff !important;
}

.van-nav-bar{
    background-color: transparent;
}
.van-nav-bar::after{
   border: none;
}
.guanzhu{
    width: 100%;
    height: 180px;
    text-align: center;
}
.guanzhu>img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.s-guanzhu{
    width: 60px;
    height: 25px;
    border-radius: 20px;
    color: #fff;
    background-color: #ff5f42;
    line-height: 25px;
    margin: 0 auto;
}
.pinglun{
    width: 100%;
    height: 200px;
}
.pinglun>p{
    height: 40px;
    font-size: 18px;
    border-bottom: 0.5px solid #f5f5f5;
    margin-top: 10px;
    margin-left: 10px;
}
</style>